<template>
    <view class="">
        <view class="inputs">
            <view class="inputContainer">
                <view class="logo">
                    登录
                </view>
                <view class="input-group">
                    <view class="input-group-addon">
                        <image src="../../static/icon_05.png" class="account"></image>
                    </view>
                    <input @input="name" class="accountInput" placeholder-class="placeholder" :value="form.name"
                        placeholder="请输入账号" />
                </view>
            </view>
            <view class="inputContainer">
                <view class="input-group">
                    <view class="input-group-addon">
                        <image src="../../static/icon_06.png" class="account"></image>
                    </view>
                    <input @input="password" class="accountInput" placeholder-class="placeholder"
                        placeholder="请输入密码" />
                </view>
            </view>


        </view>
        <view class="loginContainer">
            <view class="login" @click="toUser">
                登录
            </view>
        </view>
    </view>
</template>

<script>
    import {
        checkUser,
        checkPwd
    } from "@/common/checkForm.js"
    export default {
        data() {
            return {
                form: {
                    name: '',
                    password: '',
                },
            }
        },
        onLoad() {
			this.form.name = uni.getStorageSync('user')
        },
        methods: {
            name(e) {
                this.form.name = e.detail.value.trim()
            },
            password(e) {
                this.form.password = e.detail.value.trim()
            },
            toUser() {
                if (!checkUser(this.form.name)) {
                    return
                }
                if (!checkPwd(this.form.password)) {
                    return
                }
                //请求接口
                this.$api.post('mobile/user/login',{username:this.form.name,password:this.form.password}).then(res => {
					uni.setStorageSync('user', res.result.userInfo.username)
					uni.setStorageSync('token', res.result.token);
					uni.reLaunch({
						url:'/pages/index/index'
					})
                })
            }
        }
    }
</script>

<style>
    /* page{
		width: 100%;
		height: 100%;
		background: #fff!important;
	} */
    .logo {
        display: flex;
        justify-content: center;
        margin-bottom: 100rpx;
        font-size: 50rpx;
    }

    .account {
        width: 28rpx;
        height: 38rpx;
        z-index: 100;
    }

    .inputs {
        padding-top: 160rpx;
    }

    .input-group-addon {
        border: none;
        background-color: rgba(0, 0, 0, 0);
        font-size: 26rpx;
        text-align: center;
    }

    .input-group-addon1 {
        width: 220rpx;
        padding: 10rpx 14rpx;
        color: #E53349;
        border: 2rpx solid #E53349;
        border-radius: 6rpx;
    }

    .inputContainer {
        padding: 40rpx 80rpx;
    }

    .input-group {
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
        /* padding-bottom: 10rpx; */
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .accountInput {
        /* border-bottom: 2rpx solid rgba(0, 0, 0, 0.1); */
        width: 100%;
        height: 80rpx;
        font-size: 30rpx;
        padding-left: 30rpx;
    }

    .placeholder {
        color: #666;
        font-size: 30rpx;
    }

    .loginContainer {
        padding: 80rpx;
    }

    .login {
        width: 100%;
        background-color: #E53349;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        color: #FFFFFF;
        border-radius: 8px;
        font-size: 34rpx;
    }
</style>
